<script lang="ts" setup>
import ProductBox from "../Common/ProductBox.vue";
import { QuestionCircleOutlined } from "@ant-design/icons-vue"
import { ref } from "vue";

const binded = ref(true);
</script>
<template>
  <div class="pr-5 pl-5">
    <ProductBox title="微信绑定">
      <div v-if="binded">
        <p>
          <span>绑定状态：</span>
          <span class="text-base text-lime-500">已绑定</span>
        </p>

        <a-popconfirm title="确定解绑？" @confirm="binded = false">
          <template #icon>
            <question-circle-outlined style="color: red" />
          </template>
          <a-button type="primary">解绑</a-button>
        </a-popconfirm>
      </div>
      <div class="w-full flex flex-col items-center" v-else>
        <p class="w-80">扫码绑定：</p>
        <p class="flex flex-col items-center w-100">
          <img src="/console/qr.png" alt="qrcode" class="w-50" />
          <span class="text-blue-500">微信扫描二维码绑定当前账号</span>
        </p>
      </div>
    </ProductBox>
  </div>
</template>
<style lang="scss" scoped></style>
